<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        #one>a{
            display: block;
            margin-top: 10px;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div>
        <p>卡号：<span th:text="${session.loginAccount.cardno}">卡号</span>&nbsp;&nbsp;<a href="/logout">退出登录</a></p>
        <div id="one" style="display: inline-block; height: 300px">
            <a href="#">查询余额</a>
            <a th:href="@{/toDeal}">转账</a>
            <a th:href="@{/list}">查询交易记录</a>
            <a href="#">修改密码</a>
        </div>
        <div style="display: inline-block;width: 600px;height: 300px;position: relative; top: 100px">
            <span>当前操作范围：查询交易记录。请选择时间范围后点“查询”按钮</span><br/>
            <form action="/list" method="get">
                查询日期范围：<input type="text" name="openDate" th:value="${openDate}">到<input type="text" name="closeDate" th:value="${closeDate}"><input type="submit" value="查询">
            </form>
            <table>
                <tr style="background-color: cornflowerblue">
                    <th>交易日期</th>
                    <th>支出/支入</th>
                    <th>账户余额</th>
                    <th>交易类型</th>
                    <th>备注</th>
                </tr>
                <!--            遍历数据列表-->
                <tr th:each="record : ${page.data}">
                    <td th:text="${record.transactiondate}"></td>
                    <td th:text="${record.amount}"></td>
                    <td th:text="${record.balance}"></td>
                    <td th:text="${record.transationtype}"></td>
                    <td th:text="${record.remark}"></td>
                </tr>
                <tr>
                    <td colspan="5">
                        <!--分页组件-->
                        <div style="width: 1000px; margin-left: 200px">
                            <!--当前页面大于1则开放首页和上一页功能-->
                            <a th:if="${page.pageNo gt 1}" th:onclick="'page_nev(' + 1 + ')'">首页</a>
                            <a th:if="${page.pageNo gt 1}" th:onclick="'page_nev(' + ${page.getPageNo() - 1} + ')'">上一页</a>
                            <!--当前页面未大于1则提升用户-->
                            <a th:unless="${page.pageNo gt 1}" href="javascript:alert('已经是首页')">首页</a>
                            <a th:unless="${page.pageNo gt 1}" href="javascript:alert('已经是第一页')">上一页</a>

                            <!--当前页数小于总页数则开放下一页和末页功能-->
                            <a th:if="${page.pageNo lt page.totalPage}" th:onclick="'page_nev(' + ${page.getPageNo() + 1} + ')'">下一页</a>
                            <a th:if="${page.pageNo lt page.totalPage}" th:onclick="'page_nev(' + ${page.totalPage} + ')'">未页</a>
                            <!--当前页数未小于总页数则提升用户-->
                            <a th:unless="${page.pageNo lt page.totalPage}" href="javascript:alert('已经是最后一页')">下一页</a>
                            <a th:unless="${page.pageNo lt page.totalPage}" href="javascript:alert('已经是最后一页')">未页</a>
                            <!--显示当前页数以及总页数-->
                            <span th:text="|第${page.pageNo}页/共${page.totalPage}页|"></span>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
<script>
    function page_nev(pageIndex){
        var openDate = $("input[name='openDate']").val();
        var closeDate = $("input[name='closeDate']").val();
        window.location.href = "/list?pageIndex=" + pageIndex + "&openDate=" + openDate + "&closeDate=" + closeDate;
    }
</script>
</body>
</html>